import React, { useCallback } from "react";
import { useNavigate } from "react-router-dom";

import { Button, Form, Input, message } from "antd";
import { useForm } from "antd/es/form/Form";
import "./update-password.css";

import { forgetPassword, forgetPasswordCaptcha } from "../../api/login";

export interface UpdatePass {
    username: string;
    email: string;
    captcha: string;
    password: string;
    confirmPassword: string;
}

const layout1 = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 }
}
const layout2 = {
    labelCol: { span: 0 },
    wrapperCol: { span: 24 }
}

export const UpdatePassword: React.FC = () => {
    const [form] = useForm();
    const navigate = useNavigate();
    /* 由于修改密码完成后要进行页面跳转，需要用到路由相关的hooks，所以不可以写到函数式组件外面。
        我们写在外面就是为了防止其他状态的改变导致该方法重新渲染加载。如果写在了函数式组件里面，我们考虑
        使用 useCallback进行优化
     */
    const onFinish = useCallback((values: UpdatePass)=>{
        if(values.password !== values.confirmPassword) return message.warning("两次密码不一致");
        forgetPassword(values).then(res => {
            message.success("密码修改成功，即将跳转到登录页");
            setTimeout(()=>{
                navigate("/login");
            }, 1500);
        }, err => {
            message.error("系统繁忙，请稍后重试");
        })
    }, []);
    const sendCaptcha = useCallback(()=>{
        const address = form.getFieldValue("email");
        if(!address) return message.warning("请输入邮箱！");

        forgetPasswordCaptcha(address).then(res => {
            message.success("验证码已发送");
        }, err => {
            message.error("系统繁忙，请稍后重试");
        })
    }, [])

    return (
        <div className="update-password">
            <h1>会议室预定系统</h1>
            <Form
                form={form}
                {...layout1}
                onFinish={onFinish}
                colon={false}
                autoComplete="off"
            >
                <Form.Item
                    label="用户名"
                    name="username"
                    rules={[{required: true, message: "请输入用户名！"}]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="邮箱"
                    name="email"
                    rules={[
                        {required: true, message: "请输入邮箱！"},
                        {type: "email", message: "请输入合法的邮箱格式！"}
                    ]}
                >
                    <Input />
                </Form.Item>
                <div className="update-password__captcha">
                    <Form.Item
                        label="验证码"
                        name="captcha"
                        rules={[{required: true, message: "请输入验证码！"}]}
                    >
                        <Input />
                    </Form.Item>
                    <Button type="primary" onClick={sendCaptcha}>发送验证码</Button>
                </div>
                <Form.Item
                    label="密码"
                    name="password"
                    rules={[{required: true, message: "请输入密码！"}]}
                >
                    <Input.Password />
                </Form.Item>
                <Form.Item
                    label="确认密码"
                    name="confirmPassword"
                    rules={[{required: true, message: "请输入确认密码！"}]}
                >
                    <Input.Password />
                </Form.Item>
                <Form.Item
                    {...layout1}
                    label=" "
                >
                    <Button className="update-password__btn" type="primary" htmlType="submit">修改</Button>
                </Form.Item>
            </Form>
        </div>
    )

}